<template>
	<view>
		<view class="u-page">
			<view class="flex alg-center pT10  pR15">
				<block v-for="(item,i) in tabLis" :key="i">
					<view @click="changeTab(i)" class="tabItem font32" :class="current==i?'active':''">
						<text class="relative">{{item.name}}</text>
					</view>
				</block>
			</view>
			<grabOrder v-if="current==0"></grabOrder>
			<oftenJober v-else-if="current==1"></oftenJober>
			<nearJober v-else></nearJober>
		</view>
		<xfCompanyTabbar></xfCompanyTabbar>
	</view>
</template>

<script>
	import grabOrder from "./grabOrders.vue"
	import oftenJober from "./oftenJober.vue"
	import nearJober from "./nearJober.vue"
	export default {
		components: {
			grabOrder,
			oftenJober,
			nearJober
		},
		data() {
			return {
				current: 0,
				tabLis:[
					{name:"抢单"},
					{name:"常用工"},
					{name:"附近求职者"}
				]
			}
		},
		onShow(e) {

		},
		methods: {
			changeTab(index) {
				this.current=index;
			}
		}
	};
</script>
<style lang="scss">
	page {
		min-height: 100%;
		background: linear-gradient(0deg, #F8FAFF, #EBF0FF);
	}
</style>
<style scoped lang="scss">
	.tabItem {
		margin-right: 58rpx;
		position: relative;
		
		.relative {
			z-index: 1;
		}
	
		&:first-child {
			margin-left: 20rpx;
		}
	
		&:last-child {
			margin-right: 30rpx;
		}
	
		&.active {
			font-weight: bold;
			font-size: 40rpx;
			&:before {
				content: "";
			
				position: absolute;
				bottom: -10rpx;
				z-index: 0;
				width: 60rpx;
				left: calc(50% - 30rpx);
				height: 10rpx;
				background: linear-gradient(to right, #3291F8, #E4F1FE);
				border-radius: 5rpx;
			}
		}
	}
</style>